<template>
  <div class="signed-main-box">
    <div class="signed-upload-box">
      <div class="file-upload-box" v-show="addSigned">
        <FileUpload :msg="this.msg" :limit=1 :type=2 :project-id="this.applyId"
                    @uploadResponse="acceptUpload"></FileUpload>
      </div>
      <div class="pdf-preview-box" v-show="!addSigned">
        <PDF_preview_Component :pdf_url="this.pdf_url"></PDF_preview_Component>
      </div>
    </div>
    <div class="signature-upload-box" v-show="!addSigned">
      <div class="signature-first-box">
        <span class="role-msg">甲方：</span>
        <div class="upload-delete">
          <el-upload
              :disabled="FirstUploadDisabled"
              v-model="signed_first_url"
              ref="upload"
              :action="this.action1"
              name="picture"
              list-type="picture-card"
              limit=1
              :show-file-list="false"
              :file-list="signed_first"
              :before-upload="beforeUpload"
              :on-success="handleSuccess_first"
              style="margin:20px 40px;"
          >
            <img v-if="this.signed_first_url!==''" :src="signed_first_url"
                 class="avatar">
            <i v-show="!FirstUploadDisabled" class="el-icon-plus"></i>
          </el-upload>
          <el-button v-show="FirstUploadDisabled && this.$store.getters.getUser.role!=='student' && this.deleteAvatarButton"
                     @click="deleteAvatar_first"
                     class="delete-avatar-button"
                     type="danger" icon="el-icon-delete" circle></el-button>
        </div>
        <el-result class="result-icon" v-show="FirstUploadDisabled"
                   icon="success"/>
      </div>
      <div class="signature-second-box">
        <span class="role-msg">乙方：</span>
        <div class="upload-delete">
          <el-upload
              v-model="signed_second_url"
              :disabled="SecondUploadDisabled"
              ref="upload"
              :action="this.action2"
              name="picture"
              list-type="picture-card"
              limit=1
              :show-file-list="false"
              :file-list="signed_second"
              :before-upload="beforeUpload"
              :on-success="handleSuccess_second"
              style="margin:20px 40px;"
          >
            <img v-if="this.signed_second_url!==''" :src="signed_second_url"
                 class="avatar">
            <i v-show="!SecondUploadDisabled" class="el-icon-plus"></i>
          </el-upload>
          <el-button v-show="this.signed_second_url!==''&& this.$store.getters.getUser.role==='student'&& this.deleteSecond"
                     @click="deleteAvatar_second" class="delete-avatar-button"
                     type="danger" icon="el-icon-delete" circle></el-button>
          <el-button
              v-show="this.$store.getters.getUser.role!=='student'&&this.signed_second_url!=='' && this.rejectButton"
              @click="reject_signed" class="reject-button"
              type="danger">驳回
          </el-button>
        </div>
        <el-result class="result-icon" v-if="this.signed_second_url!==''" :icon="this.icon"/>
        <el-button v-show="this.$store.getters.getUser.role!=='student'&& this.signed_second_url!=='' && this.signedButton" @click="SignedSuccess" type="primary"
                   style="margin-left: 60px">完成签约
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import FileUpload from "@/components/FileUpload";
import PDF_preview_Component from "@/components/adminComponents/PDF_preview_Component";

export default {
  name: "SignedOnline",
  components: {PDF_preview_Component, FileUpload},
  data() {
    return {
      msg: '请上传当前项目合同',
      applyId: -1,
      addSigned: false,
      pdf_url: "",
      signed_first_url: '',
      signed_second_url: '',
      signed_first: [],
      signed_second: [],
      result2: false,
      action1: "",
      action2: "",
      icon: "success",
      deleteAvatarButton: true,
      deleteSecond: true,
      signedButton: true,
      rejectButton: true
    }
  },
  computed: {
    FirstUploadDisabled: function () {
      return this.signed_first_url !== '' || this.$store.getters.getUser.role === "student";

    },
    SecondUploadDisabled: function () {
      return this.signed_second_url !== '' || this.$store.getters.getUser.role !== "student";
    },
  },
  mounted() {
    this.applyId = this.$route.query.applyId
    this.action1 = "http://localhost:8088/api/uploadsigned?type=1&applyId=" + this.applyId + "&userId=" + this.$store.getters.getUser.id
    this.action2 = "http://localhost:8088/api/uploadsigned?type=2&applyId=" + this.applyId + "&userId=" + this.$store.getters.getUser.id
    this.getSignedInfo()
    this.getIcon()
    this.isSuccess()
  },
  methods: {
    getSignedInfo() {
      this.$axios.get("/adminSigned/getSignedInfo?applyId=" + this.applyId).then(res => {
        if (res.data.code === 200) {
          this.addSigned = false
          this.pdf_url = this.$target + "Public/file/" + res.data.data.filePath
          if (res.data.data.signed_first === "null")
            this.signed_first_url = ""
          else
            this.signed_first_url = this.$target + "Public/file/" + res.data.data.signed_first
          if (res.data.data.signed_second === "null")
            this.signed_second_url = ""
          else
            this.signed_second_url = this.$target + "Public/file/" + res.data.data.signed_second
        } else {
          this.addSigned = true
        }
      })
    },
    acceptUpload(val) {
      this.pdf_url = this.$target + "Public/file/" + val.data
      this.addSigned = false
    },
    handleSuccess_first(res) {
      this.$message({
        type: 'success',
        message: '图片上传成功',
        duration: 3000
      })
      this.signed_first_url = "http://localhost:99/Public/file/" + res.data // 将返回的文件储存路径赋值picture字段
      this.result1 = true
    },
    handleSuccess_second(res) {
      this.$message({
        type: 'success',
        message: '图片上传成功',
        duration: 3000
      })
      this.signed_second_url = "http://localhost:99/Public/file/" + res.data // 将返回的文件储存路径赋值picture字段
      this.icon = "success"
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isGIF = file.type === 'image/gif'
      const isPNG = file.type === 'image/png'
      const isBMP = file.type === 'image/bmp'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG && !isGIF && !isPNG && !isBMP) {
        this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return (isJPG || isBMP || isGIF || isPNG) && isLt2M
    },
    deleteAvatar_second() {
      this.$axios.get("/delete?file_name=" + this.signed_second_url.replace(this.$target + "Public/file/", "")).then(res => {
        if (res.data.code === 200) {
          this.$message.success("图片删除成功")
          this.signed_second_url = '';
          this.signed_second = []
        }
      })
      this.$axios.post("/adminSigned/deleteSignedFile?type=2&applyId=" + this.applyId)
    },
    deleteAvatar_first() {
      this.$axios.get("/delete?file_name=" + this.signed_first_url.replace(this.$target + "Public/file/", "")).then(res => {
        if (res.data.code === 200) {
          this.$message.success("图片删除成功")
          this.signed_first_url = '';
          this.signed_first = []
        }
      })
      this.$axios.post("/adminSigned/deleteSignedFile?type=1&applyId=" + this.applyId)
    },
    getIcon() {
      this.$axios.get("/adminSigned/getIcon?applyId="+this.applyId).then(res => {
        if (res.data.code === 200) {
          this.icon = res.data.data
        }
      })
    },
    isSuccess() {
      this.$axios.get("/adminSigned/isSuccess?applyId="+this.applyId).then(res => {
        if (res.data.code === 200){
          this.rejectButton = false
          this.signedButton = false
          this.deleteAvatarButton = false
          this.deleteSecond = false
          this.icon = "success"
        }
      })
    },
    reject_signed() {
      this.$axios.post("/adminSigned/rejectSigned?applyId="+this.applyId).then(res => {
        if (res.data.code === 200){
          this.$message.error("签约驳回成功")
          this.signedButton = false
          this.rejectButton = false
          this.icon = "error"
        }
      })
    },
    SignedSuccess() {
      this.$axios.post("/adminSigned/signedSuccess?applyId="+this.applyId).then(res => {
        if (res.data.code === 200){
          this.$message.success("审核通过")
          this.signedButton = false
          this.rejectButton = false
          this.deleteAvatarButton = false
          this.icon = "success"
          this.$axios.post("/message/sendMessage",{
            author: parseInt(this.$store.getters.getUser.id),
            applyId: parseInt(this.applyId),
            message: "您的申报项目:"+ this.applyId+",签约审核完成，请等待资金发放。"
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.signed-main-box {
  display: flex;
  flex-direction: row;
  width: 985px;
  height: 800px;
}

.signed-upload-box {
  width: 550px;
  height: 800px;
}

.file-upload-box {
  margin: 100px 300px;
}

.pdf-preview-box {
  width: 550px;
}

.signature-upload-box {
  display: flex;
  flex-direction: column;
  padding-top: 15px;
  padding-left: 50px;
  height: 800px;
  width: 440px;
}

.signature-first-box {
  height: 50%;
}

.signature-second-box {
  height: 50%;
}

.avatar {
  width: 160px;
  height: 160px;
  display: block;
}

.upload-delete {
  display: flex;
  flex-direction: row;
}

.role-msg {
  font-family: "Adobe 黑体 Std R";
  font-size: 30px;
}

.result-icon {
  margin-top: -50px;
  float: right;
}

.delete-avatar-button {
  width: 40px;
  height: 40px;
  margin: 108px 10px;
}

.reject-button {
  height: 40px;
  width: 70px;
  margin: 108px 10px;
}
</style>